<template>
  <div class="maps-container">
    <div v-if="view" id="province" class="box"></div>
  </div>
</template>
<script>
import echarts from "echarts";
// import { findAllAcceptDataByArea } from "@/api/sp/api";
export default {
  data() {
    return {
      listArr: [], //城市json
      max: "", //最大value值
      min: "", // 最小value值
      view: true /* 切换省份地图 州市地区 */,
      valueList: [
        { accept: 36, result: 35, areaCode: 533300 },
        { accept: 117, result: 117, areaCode: 530700 },
        { accept: 268, result: 267, areaCode: 532800 },
        { accept: 142, result: 142, areaCode: 530900 },
        { accept: 215, result: 214, areaCode: 530800 },
        { accept: 370, result: 370, areaCode: 530600 },
        { accept: 135, result: 135, areaCode: 533100 },
        { accept: 533, result: 533, areaCode: 530300 },
        { accept: 248, result: 248, areaCode: 530500 },
        { accept: 290, result: 290, areaCode: 532900 },
        { accept: 658, result: 657, areaCode: 532500 },
        { accept: 238, result: 238, areaCode: 532600 },
        { accept: 989, result: 985, areaCode: 530100 },
        { accept: 299, result: 299, areaCode: 530400 },
        { accept: 192, result: 192, areaCode: 532300 },
        { accept: 90, result: 88, areaCode: 533400 }
      ],
      ynCodeList: [
        530000,
        530100,
        530300,
        530400,
        530500,
        530600,
        530700,
        530800,
        530900,
        532300,
        532500,
        532600,
        532800,
        532900,
        533100,
        533300,
        533400
      ],
    
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.getWidth();
  },
  methods: {
    getWidth() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.25 + "px";
      let h = ch * 0.48 + "px";
      document.getElementById("province").style.width = w;
      document.getElementById("province").style.height = h;
    },
    getData() {
      // findAllAcceptDataByArea().then(res => {
      //   console.log("getData", res);
      // });
      // this.valueList = this.res.result.data;
      this.getJson(530000, "云南省");
    },
    getJson(cityCode, cityName, provinceCode) {
      //根据areaCode获取本地json
      console.log(cityCode, cityName, provinceCode);

      if (provinceCode) {
        // 区/县
        // return
        this.getCountyGeo(cityCode, cityName, provinceCode);
      } else {
        // 州/市
        this.getCityGeo(cityCode, cityName);
      }
    },
    // 获取城市数据
    getCityGeo(cityCode, cityName) {
      if (this.ynCodeList.indexOf(cityCode) == -1) {
        console.log("阻止请求");
        return;
      }
      import("@/views/echart/yunnan/" + cityCode + ".geo").then(res => {
        console.log("州/市json", res);
        this.getCityName(res);
        console.log(22222, this.listArr);
        setTimeout(() => {
          this.drawProvinceMap(cityCode, res);
          // this.drawProvinceMap(cityCode, res);
        });
      });
    },

    /* 获取区县数据 */
    getCountyGeo(cityCode, cityName, provinceCode) {
      if (this.ynCodeList.indexOf(provinceCode) == -1) {
        console.log("阻止请求");
        return;
      }

      import("@/views/echart/yunnan/" + provinceCode + ".geo").then(res => {
        console.log("区/县json", res.features);
        let countObj;
        let arr = res.features;
        for (let j = 0; j < arr.length; j++) {
          if (arr[j].properties.adcode == cityCode) {
            console.log("区", arr[j]);
            countObj = arr[j];
          }
        }

        this.getCityName(countObj);
        console.log("3333333");
        setTimeout(() => {
          let obj = {
            features: [countObj]
          };

          this.drawProvinceMap(cityCode, obj);
        });
      });
    },
    getCityName(obj) {
      // 获取城市名称数据
      this.listArr = [];
      console.log("城市数据", obj);
      if (obj.features) {
        let arr = obj.features;
        // 循环取出 城市名称和value值
        for (var j = 0; j < arr.length; j++) {
          this.listArr.push({
            name: arr[j].properties.name,
            value: arr[j].properties.adcode,
            accept: 0,
            result: 0,
            areaCode: 0
          });
          for (var k = 0; k < j; k++) {
            if (arr[j].properties.adcode == this.valueList[k].areaCode) {
              //  console.log(this.valueList[k]);
              this.listArr[j] = {
                name: arr[j].properties.name,
                value: arr[j].properties.adcode,
                accept: this.valueList[k].accept,
                result: this.valueList[k].result,
                areaCode: this.valueList[k].areaCode
              };
            }
          }
        }
      } else {
        this.listArr.push({
          name: obj.properties.name,
          value: obj.properties.adcode,
          clicked: true /* 自定义字段控制地图不可点击 */
        });
      }
      // this.listArr.concat(this.valueList)
      console.log("处理完的地图数组", this.listArr);
    },
    checkCode(item) {
      console.log(item);
      return item.age == 20;
    },
    drawProvinceMap(mapName, obj) {
      console.log(mapName, obj);
      let _this = this;
      let echartsMap = echarts.init(document.getElementById("province"));
      echarts.registerMap(mapName, obj);
      echartsMap.setOption({
        // backgroundColor: "#030a4e",
        backgroundColor: "#154e90",
        // visualMap: {
        //   min: _this.min,
        //   max: _this.max,
        //   show: false,
        //   inRange: {
        //     color: ["lightskyblue", "yellow", "orangered"]
        //   }
        // },
        visualMap: {
          min: 0,
          max: 500,
          show: false,
          splitNumber: 5,
          inRange: {
            color: [
              "#638CFF",
              "#4F7EFF",
              "#3C70FF",
              "#2962FF",
              "#265AE8"
            ].reverse()
          },
          textStyle: {
            color: "#fff"
          }
        },

        series: [
          {
            type: "map",
            map: "",
            mapType: mapName,
            // itemStyle: {
            //   normal: {
            //     label: { show: true },
            //     // areaColor: "#032e61",
            //     // borderColor: "#00b3fe",
            //     // borderColor: 'rgba(147, 235, 248, 1)',
            //     borderColor: "#91e6ff",
            //     areaColor: "#389BB7",
            //     borderWidth: 1
            //   },
            //   emphasis: {
            //     // areaColor: "#1B3FA3", // hover效果
            //     areaColor: "#389BB7",
            //     borderWidth: 0,
            //     label: {
            //       textStyle: {
            //         color: "#fff"
            //       }
            //     }
            //   },
            //   shadowColor: "rgba(128, 217, 248, 1)",
            //   // shadowColor: 'rgba(255, 255, 255, 1)',
            //   shadowOffsetX: -2,
            //   shadowOffsetY: 2,
            //   shadowBlur: 10
            // },
            label: {
              show: true,
              normal: {
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                label: { show: true },
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0,
                label: {
                  textStyle: {
                    color: "#fff"
                  }
                }
              }
            },
            zoom: 1.1, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2
            },

            data: _this.listArr
          }
        ],

        tooltip: {
          padding: 0,
          backgroundColor: "transparent",
          formatter: params => {
            return `<table style="background: #3f5c6d2c;color: #fdffff" border="1" class="map__tooltip o_font20">
                                    <thead>
                                       <tr>
                                           <th>总受理量</th> <th>总办结量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>${params.data.accept}</td><td>${params.data.result}</td>
                                         </tr>
                                    </tbody>
                                </table>`;
          }
        }
      });
      echartsMap.on("click", this.echartsMapClick);
    },
    echartsMapClick(params) {
      console.log("地图点击", params);
      // return;
      if (params.data.clicked) {
        // 判断地图是否可以点击
        return;
      }
      this.view = false;
      this.view = true;
      if (this.ynCodeList.indexOf(params.value) == -1) {
        // 区/县
        setTimeout(() => {
          this.getWidth();
          let provinceCode = (params.value + "").replace(/\d{2}$/, "00");
          this.getJson(params.value, params.name, provinceCode * 1);
        });
      } else {
        // 州/市
        setTimeout(() => {
          // this.view = true;
          this.getWidth();
          this.getJson(params.value, params.name);
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.maps-container {
  width: 100%;
  .box {
    margin: 0 auto;
  }
}
</style>
